<template>
  <div>
    <ul>
      <li v-for="(value, key) in person" :key="key">{{ key }} - {{ value }}</li>
    </ul>
    <button @click="update">更新</button>
    <button @click="add">添加</button>
    <p @click="num++">{{ num }}</p>

    <ul>
      <li v-for="person in persons" :key="person.id">
        {{ person.name }} - {{ person.age }}
      </li>
    </ul>
    <button @click="updatePersons">更新</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    this.num = 1;

    return {
      person: {
        name: "haijing",
        age: 58,
        // sex: '男'
      },
      persons: [{ id: 1, name: "haijing", age: 58 }],
    };
  },
  methods: {
    update() {
      /*
        响应式数据：更新数据时，数据会变化，用户页面也会变化

        Vue中到底什么数据是响应式的？
          data函数返回值对象中数据的原有属性都是响应式数据
          新添加属性不是响应式的 
            --> 对象用 this.$set()
            --> 数组用 变更方法 push pop...
      */
      this.person.age++;
    },
    add() {
      // this.person.sex = "男";
      // 添加响应式数据
      this.$set(this.person, "sex", "男");
    },
    updatePersons() {
      // this.persons[0].age++;
      // this.persons[1] = { id: 2, name: "laoluo", age: 33 };
      // https://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E6%9B%B4%E6%96%B9%E6%B3%95
      this.persons.push({ id: 2, name: "laoluo", age: 33 });
    },
  },
};
</script>

<style></style>
